<template>
    <div class="flex-col h-100">
        <div class="district-cont flex-row">
            <div class="district-list flex-1 center p-relative">
                

                <div class="district-inner-list padding-5 p-absolute font-bold">
                    <div class="selectDistrictMian dline-bottom p-bottom-2_5">
                        <img src="../../assets/icon/leftArrow.png" alt="" class="img-size-10">
                        已选区域:{{selectDistrict}}
                    </div>
                    <div class="selectDistrictSub m-tb-5">
                        <div><span class="squarePoint"></span>选择区域:</div>
                        <div class="flex-row ">
                            <div class="selectDistrictSubText occupancy">{{selectDistrict}}</div>
                            <div class="occupancy"><!-- 空置占位 --></div>
                        </div>
                    </div>
                    <!-- 虚线 -->
                    <div class="dashed-line"></div>
                    <div class="district-all flex-row">
                        <template v-for="item in list">
                            <div class="district-item font-nowrap">{{item}}</div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="hierarchy m-left-10 bg-f7f7f7 radius-2_5">
                <img src="../../assets/icon/hierarchy.png" class="img-size-10" alt="">
            </div>
        </div>	
        <div class="district-type-container center">
            <template v-for="item in districtTypeList">
                <div 
                    class="district-type-button" 
                    :class="{'district-type-button-selectitem':item.isChecked}">{{item.text}}</div>
            </template>
            
        </div>		
    </div>
</template>

<script>
    export default {
        data(){
            return{
                selectDistrict:'龙泉驿区',
                districtTypeList:[{text:"街道",isChecked:true},{text:"格网",isChecked:false}],
                list:[
                    "大面街道",
                    "龙泉街道",
                    "十陵街道",
                    "同安街道",
                    "西河街道",
                    "柏合街道",
                    "东安街道",
                    "洪安镇",
                    "山泉镇",
                    "洛带销",
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
@import '../../assets/css/common.scss';
.occupancy{
    width: 50%;
    text-align: center;
}
.district-cont{
    margin-top: 1rem;
    .district-list{
        min-height: 2.5rem;
    }
    .district-inner-list{
        @include fourSquareBorder(2px,20px);
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background-color: var(--themeColor0201);

        img{
            vertical-align: text-bottom;
        }

        .selectDistrictMian{
            color: var(--themeColor04);
        }
        .selectDistrictSub{
            padding: 5px 0;
            color: var(--themeColor02);
            font-weight: 100;
        }
        .selectDistrictSubText{
            padding: 5px 0;
            color: var(--themeColor03);
            font-weight: bold
        }

        .squarePoint{
            @include squarePoint;
        }

        .district-all{
            padding: 5px 0;
            flex-wrap: wrap;
            .district-item{
                
                min-width: 50%;
                margin: 5px 0;
                text-align: center;
                flex: 1;
            }
        }
    }
}

.district-type-container{
    margin-bottom: .4rem;
    flex-direction: column;

    .district-type-button{
        cursor: pointer;
        margin-bottom: 4px;
        padding: .05rem .35rem;
        border: 1px solid var(--themeColor02);
        border-radius: 5px;
        width: fit-content;
        background-color: var(--themeColor0201);
        font-weight: bold;
    }
    .district-type-button-selectitem{
        color: var(--themeColor04);
        @include theme-shadow;
    }
}
.hierarchy{
    height: fit-content;
    cursor: pointer;
    padding: 6px 15px;
}
</style>